import React, { useState,useRef,useEffect } from 'react';
import { Button, Modal ,Checkbox, Form, Input} from 'antd';
const App = (props) => {
  const myref = useRef(null)
  const [isModalOpen, setIsModalOpen] = useState(true);
  const showModal = () => {
    setIsModalOpen(true);
  };
  useEffect(()=>{
      if (props.isadd === "编辑") {
        console.log(myref.current);
        myref.current.setFieldsValue(props.edititem)

      }
  },[props.isadd])
  const handleCancel = () => {
    console.log(myref.current);
    myref.current.resetFields()
   props.modelclose({
       close:false
   })
  };
  // 点击新增的时候清除掉子组件里表单的数据
  const onFinish = (values) => {
    console.log('Success:', values);
    values.key = Math.random()
    // 将values传递给父组件，在父组件中去新增

    props.modelclose({
        close:false,
        values
    })
    myref.current.resetFields()
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <>
      <Modal title={props.isadd} open={props.ismodelopen} footer={null}  onCancel={handleCancel}>
      <Form
      ref = {myref}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="name"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="sex"
        name="sex"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="address"
        name="address"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
     
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
      </Modal>
    </>
  );
};
export default App;